<div class="w-10/12 mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-3">

        @foreach($components as $component)
            <div class="bg-gray-900 rounded-lg shadow-lg p-4 mb-4">
                <div class="cursor-pointer">
                    <img src="https://qianduanku.test/{{ $component['screenshot'] }}" alt="{{ $component['title'] }}" class="w-full h-auto" wire:click="mountAction('viewDetail', { id: {{ $component['id'] }}, project_id:{{ $project_id == null ? 0 : $project_id }}})">
                </div>
                <div class="my-1">
                    {{ $component['title'] }}
                </div>
            </div>
        @endforeach

        <x-filament-actions::modals />
    </div>
</div>
